<script>
// import { useIntersectionObserver  } from '@vueuse/core'
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { gsap,} from 'gsap';
export default{
    data(){
        return {
            istart:true,
        }
    },
    mounted(){
        this.show()
    },
    methods:{
        show(){
            gsap.registerPlugin(ScrollTrigger)
                ScrollTrigger.normalizeScroll(true)
                ScrollTrigger.create({
                  trigger:'.boxtwo',
                  start:'top+=130 top',
                  end:'+=630',
                  scrub:true,
                //   pin:true,
                //   markers:true,
                  animation:gsap.timeline()
                  .to('.boxthree',{scale:0.7,y:120,x:200 },'<')
                  .fromTo('.one1',{opacity:0},{x:'-730',opacity:1},'<')
                  .fromTo('.one2',{opacity:0},{x:'-730',opacity:1},'<')
                  .fromTo('.one3',{opacity:0},{x:'-720',opacity:1},'<')
                //   .to('.boxthree',{scale:0.5,y:120})
                  .fromTo('.one4',{opacity:0},{x:'-760',opacity:1},'<')
                  .fromTo('.one5',{opacity:0},{x:'-710',opacity:1},'<')
                  .fromTo('.one6',{opacity:0},{x:'-700',opacity:1},'<')
                  .fromTo('.one7',{opacity:0},{x:'-730',opacity:1},'<')
                  .fromTo('.one8',{opacity:0},{x:'-720',opacity:1},'<')
                  .fromTo('.one9',{opacity:0},{x:'-710',opacity:1},'<')
                  .fromTo('.one10',{opacity:0},{x:'-730',opacity:1},'<')
                  .fromTo('.one11',{opacity:0},{x:'-750',opacity:1},'<')
                  .fromTo('.one12',{opacity:0},{x:'-760',opacity:1},'<')
                  .fromTo('.one13',{opacity:0},{x:'-780',opacity:1},'<')
                  })
                  ScrollTrigger.create({
                  trigger:'.one1',
                  start:'center+=350 center',
                  end:'+=630',
                  scrub:true,
                //   pin:true,
                //   markers:true,
                  animation:gsap.timeline()
                //   .to('.boxthree',{scale:0.7,y:120,x:200 },'<')
                  .fromTo('.one1',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one2',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one3',{opacity:1},{x:'-700',opacity:0},)
                //   .to('.boxthree',{scale:0.5,y:120})
                  .fromTo('.one4',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one5',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one6',{opacity:1},{x:'-700',opacity:0},)
                  .fromTo('.one7',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one8',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one9',{opacity:1},{x:'-700',opacity:0},)
                  .fromTo('.one10',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one11',{opacity:1},{x:'-700',opacity:0},'<')
                  .fromTo('.one12',{opacity:1},{x:'-700',opacity:0},)
                  .fromTo('.one13',{opacity:1},{x:'-700',opacity:0},'<')
                  })
                }
        }

}
</script>
<template>
    <div class="boxthree">
        <div class="boxbodyone" >
            <p class="one1">发自肺腑的一些感慨：</p>
            <p class="one2">时间过得好快，</p>
            <p class="one3">不知不觉就长大了。</p>
            <p class="one4">在我看来</p>
            <p class="one5">以兴趣为驱动去学习是一件特别棒的事情</p>
            <p class="one6">毕竟在上大学之前一直是学业上的渣渣</p>
            <p class="one7">当然，在现实的引力下</p>
            <p class="one8">各种过于理想的想法都会被拖拽下来。</p>
            <p class="one9">所以在掌握足够扎实的理论基础后，</p>
            <p class="one10">业务为驱动的学习尤为重要</p>
            <p class="one11">永远不要害怕失去，</p>
            <p class="one12">毕竟曾经的我们, 也是一无所有</p>
            <p class="one13" ref="b">对于生活，不妨勇敢些</p>
        </div>
    </div>
</template>
<style lang="less" scoped>
.boxthree{
    position: relative;
    height: 1285.2px;
    border-radius: 30px;
    background-image: url('../assets/5.jpg');
    background-color: #140e0e;
    .boxbodyone{
        // width: 40%;
        position: absolute;
       
        top: 5%;
        right: 5%;
        display: flex;
        flex-direction:column;
        justify-content: space-around;
        align-self: center;
        p{
            font-size: 30px;
            // color: white;
            background-image: linear-gradient(to left, #feffff, #3f79bb); 
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 5px;
            opacity:0
        }
    }
}
</style>